{% extends 'base_authed.html' %}

{% block title %}朋友{% endblock %}
{% block js %}
<script type="text/javascript">
	function addFriendGroup(){
		var addGroupLink = $('addGroupLink');
		var addGroupNameText = $('addGroupNameText');
		
		addGroupLink.setStyle('display', 'none');
		addGroupNameText.setStyle('display', 'block');
		addGroupNameText.focus();
		
		addGroupNameText.addEvents({
			'keydown': function(event){
				if(event.key == 'esc'){
					cancelAddFriendGroup();
				}
				
				if(event.key == 'enter'){
					if(addGroupNameText.value){
						$('groupNameHid').value = addGroupNameText.value;	
						$('addGroupForm').submit();
					}
					else{
						cancelAddFriendGroup();
					}
				}
			},
			
			'blur': cancelAddFriendGroup
		});
		
		function cancelAddFriendGroup(){
			addGroupLink.setStyle('display', 'block');
			addGroupNameText.setStyle('display', 'none');
			addGroupNameText.value = '';
		}
	}
</script>
{% endblock %}

{% block content %}
<div>
	<div style="width:180px;border:solid 1px #333;float:left;">
		<h3>朋友列表</h3>
		<ol>
			{% for group in groups %}
			<li>
				{{ group.name }}
				{% if not group.is_default %}
				<a href="#">编辑</a>
				{% endif %}
			</li>
			{% endfor %}
		</ol>
		
		<form id='addGroupForm' method="post" action="/friends/addgroup/">
			<a id="addGroupLink" href="javascript:addFriendGroup()">新建列表</a>
			<input type="text" id="addGroupNameText" style="display:none" />
			<input type="hidden" id="groupNameHid" name='group_name' />
		</form>
	</div>
	<div>
		<div>您有{{ friendships.count }}个好友</div>
		<ol>
			{% for friendship in friendships %}
			<li>
				<img src="{{ friendship.friend.logo }}" />
				{{ friendship.friend.get_full_name }}({{ friendship.friend.email }})
			</li>
			{% endfor%}
		</ol>
	</div>
</div>
{% endblock %}